<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				font-family: "微软雅黑";
			}
			.arcordion{
				width: 500px;
			}
			.arcordion.arcordion_item{
				list-style: none;
				cursor: pointer;
			}
			.arcordion.item_header{
				background-color:lightgrey;
				border:1px solid darkgray;
				border-radius: 3px;
				padding:5px;
				font-weight: bold;
				font-size:18px
			}
			.arcordion.item_content{
				border:1px solid darkgrey;
				border-radius:3px;
				padding:5px;
				display:none;
			}
			.arcordion.item_content.active{
				display:block;
			}
		</style>
	</head>
	<body>
		<ul class="arcordion">
			<li class="arcordion arcordion_item">
				<div class="arcordion item_header">
					Java
				</div>
				<div class="arcordion item_content">
					<div style="float:left">
						<img src="img/android.png" width="150px" />
					</div>
					<div style="float:left">
						This is the content about Java
						<br />
						This is the content about Java
						<br />
						This is the content about Java						
					</div>
					<div style="clear:both"></div>
				</div>
			</li>
			<li class="arcordion arcordion_item">
				<div class="arcordion item_header">
					C#
				</div>
				<div class="arcordion item_content">
					This is the content about C#
					<br />
					This is the content about C#
					<br />
					This is the content about C#
				</div>
			</li>
			<li class="arcordion arcordion_item">
				<div class="arcordion item_header">
					C++
				</div>
				<div class="arcordion item_content">
					This is the content about C++
					<br />
					This is the content about C++
					<br />
					This is the content about C++
				</div>
			</li>
		</ul>
		<script>
			var items = document.getElementsByClassName("arcordion arcordion_item");
			var contents = document.getElementsByClassName("arcordion item_content");
			for(var i=0;i<items.length;i++){
				items[i].setAttribute("onclick", "selectItem(" + i + ")");
			}
			document.gete
			function selectItem(index){
				for(var i=0;i<contents.length;i++){
					if (index == i){
						contents[i].classList.add("active");
					} else{
						contents[i].classList.remove("active");
					}
				}
			}
		</script>
	</body>
</html>
